Learn how to create a glitch text effect in pure CSS with this step-by-step guide. Perfect for web developers looking to add some visual interest to their projects.
Table of Contents
A glitch effect is a design element that creates the illusion of a visual distortion or error. Glitch effects can be used in web design to create a futuristic, edgy, or retro aesthetic. They can add a unique and interesting element to any project and can be used in a variety of ways. For example, a glitch effect could be used to highlight a particular word or phrase on a webpage or to create a dynamic header for a website. Additionally, glitch effects can be used in animation to create a dynamic and engaging user experience. Overall, glitch effects are a versatile design element that can be used in a variety of ways to add visual interest to web projects.
Glitch effects are a popular design element that can add a unique and interesting visual element to web projects. By using pure CSS to create the effect, we can ensure that the effect is lightweight and doesn't require any external libraries or resources. In this tutorial, we'll walk through the process of creating a glitch text effect using only HTML and CSS. Whether you're a beginner or an experienced front-end developer, this tutorial will provide you with the tools and knowledge you need to create your own glitch text effect.
Let's start making these amazing glitch text effects using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will create a div with text in it.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our glitch text using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the glitch text is in place, the next step is to add styling to the glitch text using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our glitch text effect.
The code is using the Google Fonts API to import the "Fira Mono"font with a weight of 400.
The code sets the body element to display as a flex container, with its width and height set to 100% of the viewport's width and height, respectively. It also centers the contents of the container both vertically and horizontally using the "align-items" and "justify-content" properties. The background color is set to a dark gray (#131313) and the font color is set to white (#fff). The font size is set to 96 pixels and the font family is set to "Fira Mono", a monospaced font, with a letter-spacing of -7 pixels.
The code then defines an animation named "glitch" using the "@keyframes" rule, which is applied to a "div" element. The animation consists of a series of transforms that cause the text inside the "div" element to appear to glitch or flicker. The animation is set to run indefinitely using the "infinite" keyword.
The code also defines two pseudo-elements for the "div" element using the "::before" and "::after" selectors. These elements are positioned absolutely and display the same content as the "div" element's "title" attribute. The "::before" element is clipped to show only the top third of the content and is animated using the "glitchTop" animation. The "::after" element is clipped to show only the bottom third of the content and is animated using the "glitchBotom" animation.
This will give our glitch text effect an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
body{
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
margin: 0;
background: #131313;
color: #fff;
font-size: 96px;
font-family: 'Fira Mono', monospace;
letter-spacing: -7px;
}
div{
animation: glitch 1s linear infinite;
}
@keyframes glitch{
2%,64%{
transform: translate(2px,0) skew(0deg);
}
4%,60%{
transform: translate(-2px,0) skew(0deg);
}
62%{
transform: translate(0,0) skew(5deg);
}
}
div:before,
div:after{
content: attr(title);
position: absolute;
left: 0;
}
div:before{
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitchTop{
2%,64%{
transform: translate(2px,-2px);
}
4%,60%{
transform: translate(-2px,2px);
}
62%{
transform: translate(13px,-1px) skew(-13deg);
}
}
div:after{
animation: glitchBotom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitchBotom{
2%,64%{
transform: translate(-2px,0);
}
4%,60%{
transform: translate(-2px,0);
}
62%{
transform: translate(-22px,5px) skew(21deg);
}
} Final Output:
Conclusion:
Congratulations, you've now created a pure CSS glitch text effect! By following the steps outlined in this tutorial, you've learned how to use CSS to create a unique and interesting design element. Glitch effects can be used in a variety of ways in web design, and by creating your own effect, you now have the tools and knowledge to add this element to your own projects. Remember, with CSS, the possibilities are endless, and by experimenting with different techniques and design elements, you can create unique and engaging user experiences. We hope you found this tutorial helpful and informative, and we look forward to seeing what you create using your new glitch effect!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
